<template>
    <div>
        <ContentWrap>
            <h2 class="fonts24 fontw500">招聘进度</h2>
            <div class="flex">
                <div class="flex jcsb aic Data_jindu">
                    <p class="fontz fonts18">在招职位数 (个)</p>
                    <p class="fontz fonts36 fontw700">{{ state.headerData.position }}</p>
                </div>
                <div class="flex jcsb aic Data_jindu">
                    <p class="fontz fonts18">已入职人数 (人)</p>
                    <p class="fontz fonts36 fontw700">{{ state.headerData.entry }}</p>
                </div>
            </div>
        </ContentWrap>
        <ContentWrap style="margin: 16px 0;">
            <div class="flex aic">
                <div class="flex aic">
                    <el-date-picker clearable range-separator="To" v-model="state.times" format="YYYY-MM-DD "
                        type="daterange" value-format="YYYY-MM-DD HH:mm:ss" label="" start-placeholder="开始时间"
                        end-placeholder="结束时间" />
                </div>
                <div class="flex aic" style="margin: 0 16px;">
                    <el-cascader v-model="state.ruleForm.deptIds" clearable placeholder="应聘部门" :options="state.options"
                  :props="props1" />
                </div>
                <div class="flex aic" style="margin: 0 16px;">
                    <el-select v-model="state.ruleForm.recruitmentPositionIds" clearable placeholder="应聘职位"
                        style="width: 100%">
                        <el-option v-for="item in state.positionOptions" :key="item.id" :label="item.positionName"
                            :value="item.id" />
                    </el-select>
                </div>
                <ElButton class="margin-left16" type="primary" :icon="Search" @click="onSearch">
                    查询
                </ElButton>
                <ElButton class="margin-left16" :icon="Refresh" @click="onReset">
                    重置
                </ElButton>
            </div>
            <div class="flex data_tip aic">
                <img src="@/assets/imgs/w1.png" alt="" />
                <p class="fonts14">温馨提示：选择时间后，统计该时间段内进入初筛的简历数以及后续的流程变化数据</p>
            </div>
            <el-table :data="state.tableData" style="width: 100%;margin-top: 16px;" :headerCellStyle="headerCellStyle"
                :rowStyle="rowStyle">
                <el-table-column prop="initialScreening" label="初筛人数" />
                <el-table-column prop="departmentScreening" label="应聘部门筛选人数" />
                <el-table-column prop="writtenExamination" label="笔试人数" />
                <el-table-column prop="interview" label="待约面试人数" />
                <el-table-column prop="physicalExamination" label="体检审查人数" />
                <el-table-column prop="toBeHired" label="待入职人数" />
                <el-table-column prop="entry" label="入职人数" />
            </el-table>
            <el-table :data="state.tableDatas" style="width: 100%;margin-top: 16px;" :headerCellStyle="headerCellStyle"
                :rowStyle="rowStyle">
                <el-table-column prop="initialScreeningPassRate" label="初筛通过率" >
                    <template #default="scope">
                        <div>{{ scope.row.initialScreeningPassRate+'%' }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="departmentScreeningPassRate" label="应聘部门筛选通过率" >
                    <template #default="scope">
                        <div>{{ scope.row.departmentScreeningPassRate+'%' }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="writtenExaminationPassRate" label="笔试通过率" >
                    <template #default="scope">
                        <div>{{ scope.row.writtenExaminationPassRate+'%' }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="interviewPassRate" label="面试通过率" >
                    <template #default="scope">
                        <div>{{ scope.row.interviewPassRate+'%' }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="physicalExaminationPassRate" label="体检审查通过率" >
                    <template #default="scope">
                        <div>{{ scope.row.physicalExaminationPassRate+'%' }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="entryRate" label="入职率" >
                    <template #default="scope">
                        <div>{{ scope.row.entryRate+'%' }}</div>
                    </template>
                </el-table-column>
            </el-table>
        </ContentWrap>
        <ContentWrap>
            <h2 class="fonts24 fontw500">数据统计</h2>
            <div class="flex jcsb flexw">
                <div class="" style="width:50%;">
                    <funnelVue :data="state.tableData" />
                </div>
                <div class="" style="width: 50%;">
                    <categoryVue :data="state.tableDatas" />
                </div>
                <div class="" style="width: 50%;">
                    <barVue />
                </div>
            </div>

        </ContentWrap>
    </div>
</template>

<script lang="ts" setup>
import { deptTreeList } from "@/api/organizational/index"
import { dataStatisticsHeader, dataStatisticstable } from "@/api/data/index"
import { Search, Refresh } from '@element-plus/icons-vue'
import { positionListAll } from "@/api/recruit/index"
import { funnelVue } from './components/index'
import { barVue } from './components/index'
import { categoryVue } from './components/index'
import { ContentWrap } from '@/components/ContentWrap'
import { ref, reactive, unref } from "vue"
const props1 = {
  checkStrictly: true,
  value: "id",
  label: "label",
  emitPath: false
}
const state = reactive({
    options:[] as any,
    ruleForm: {
        createTimeStart: "",
        createTimeEnd: "",
        deptIds: "",
        recruitmentPositionIds: ""
    } as any,
    tableData: [] as any,
    tableDatas: [] as any,
    positionOptions: [] as any,
    times: [],
    headerData: {} as any,
})
// 表格头部信息
const headerCellStyle: any = {
    "background": "#F2F6FC",
    "height": "48px"
}
// 
const rowStyle: any = {
    "height": "48px"
}
// 查询
const onSearch = () => {
    console.log("查询");
    if (state.times) {
        state.ruleForm.createTimeStart = state.times[0]
        state.ruleForm.createTimeEnd = state.times[1]
    }
    dataStatisticstableApi()

}
// 重置
const onReset = () => {
    console.log("重置");
    state.times = []
    state.ruleForm.createTimeStart = ""
    state.ruleForm.createTimeEnd = ""
    state.ruleForm.deptIds = ""
    state.ruleForm.recruitmentPositionIds = ""
    dataStatisticstableApi()
}
const positionListAllApi = async () => {
    await positionListAll().then(res => {
        console.log("全部职位", res);
        state.positionOptions = res.data
    })
}
const dataStatisticsHeaderApi = async () => {
    await dataStatisticsHeader().then(res => {
        console.log("表头数据", res);
        state.headerData = res.data
    })
}

const dataStatisticstableApi = async () => {
    await dataStatisticstable(state.ruleForm).then(res => {
        console.log("表格数据", res);
        state.tableData = []
        state.tableDatas = []
        let obj1 = {//人数
            initialScreening: res.data.initialScreening || 0,
            departmentScreening: res.data.departmentScreening || 0,
            writtenExamination: res.data.writtenExamination || 0,
            interview: res.data.interview || 0,
            physicalExamination: res.data.physicalExamination || 0,
            toBeHired: res.data.toBeHired || 0,
            entry: res.data.entry || 0
        }
        let obj2 = {//成绩率
            initialScreeningPassRate: res.data.initialScreeningPassRate || 0,
            departmentScreeningPassRate: res.data.departmentScreeningPassRate || 0,
            writtenExaminationPassRate: res.data.writtenExaminationPassRate || 0,
            interviewPassRate: res.data.interviewPassRate || 0,
            physicalExaminationPassRate: res.data.physicalExaminationPassRate || 0,
            entryRate: res.data.entryRate || 0,
        }
        for (const key in obj2) {
            obj2[key] = Number(obj2[key]).toFixed(2) * 100
            obj2[key] = obj2[key]
        }
        state.tableData.push(obj1)
        state.tableDatas.push(obj2)
    })
}
const deptTreeListApi = async () => {
  await deptTreeList().then(res => {
    state.options = res.data.tree
  })
}
deptTreeListApi()
dataStatisticstableApi()
dataStatisticsHeaderApi()
positionListAllApi()
</script>

<style lang="less" scoped>
.Data_jindu {
    width: 246px;
    padding: 24px 47px;
    height: 52px;
    background: #ECF4FF;

    &:nth-child(2) {
        margin-left: 16px;
    }
}

h2 {
    position: relative;
    margin: 0;
    margin-bottom: 16px;

    &::after {
        position: absolute;
        left: -20px;
        top: 2px;
        content: "";
        width: 8px;
        height: 24px;
        background: #2F6CBC;
        border-radius: 0px 4px 4px 0px;
        opacity: 1;
    }
}

.data_tip {
    margin: 16px 0px;
    padding: 0px 24px;
    height: 46px;
    background: #FFF9EE;
    border-radius: 8px 8px 8px 8px;
    opacity: 1;
    border: 1px solid #FCBF3C;

    img {
        width: 16px;
        height: 16px;
        margin-right: 8px;
    }
}
</style>